import React from 'react';
import {
  Image,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import PropTypes from 'prop-types';

import HorizontalMarquee from './HorizontalMarquee';
import VerticalMarquee from './VerticalMarquee';

export default class NoticeBar extends React.Component {
  static defaultProps = {
    type: 'h',//默认横向
    mode: '',
    onClick() {
    },
    icon: (
      <Image
        source={{
          uri:
            'https://zos.alipayobjects.com/rmsportal/UgviADRsIpznkjSEXWEaPTlKtPCMSlth.png',
        }}
        style={{width: 14, height: 12}}
      />
    ),
  };

  static propTypes = {
    type: PropTypes.oneOf(['h', 'v']),
  }

  constructor(props) {
    super(props);
    this.state = {
      show: true,
    };
  }

  onClick = () => {
    const {mode, onClick} = this.props;
    if (onClick) {
      onClick();
    }
    if (mode === 'closable') {
      this.setState({
        show: false,
      });
    }
  }

  render() {
    const {children, mode, icon, style, action, marqueeProps, type} = this.props;

    let operationDom: any = null;
    if (mode === 'closable') {
      operationDom = (
        <TouchableWithoutFeedback onPress={this.onClick}>
          <View style={styles.actionWrap}>
            {action ? action : <Text style={[styles.close]}>×</Text>}
          </View>
        </TouchableWithoutFeedback>
      );
    } else if (mode === 'link') {
      operationDom = (
        <View style={styles.actionWrap}>
          {action ? action : <Text style={[styles.link]}>∟</Text>}
        </View>
      );
    }

    let quee: any = null;
    if (type === 'h') {
      quee = (
        <HorizontalMarquee style={styles.content} text={children} {...marqueeProps} />
      )
    } else if (type === 'v') {
      quee = (
        <VerticalMarquee style={styles.content} text={children} {...marqueeProps} />
      )
    }

    const main = (
      <View style={[styles.notice, style]}>
        {icon && <View style={styles.left15}>{icon}</View>}
        <View style={[styles.container, icon ? styles.left6 : styles.left15]}>
          {quee}
        </View>
        {operationDom}
      </View>
    );
    return this.state.show ? (
      mode === 'closable' ? (
        main
      ) : (
        <TouchableWithoutFeedback onPress={this.onClick}>
          {main}
        </TouchableWithoutFeedback>
      )
    ) : null;
  }
}

const styles = StyleSheet.create({
  notice: {
    backgroundColor: '#fffada',
    height: 36,
    overflow: 'hidden',
    flexDirection: 'row',
    alignItems: 'center',
  },
  container: {
    flex: 1,
    marginRight: 15,
    overflow: 'hidden',
    width: 0, // ios bug: width size is wrong (usecase: with react-navigation).
  },
  content: {
    fontSize: 15,
    color: '#f4333c',
  },
  left6: {
    marginLeft: 5,
  },
  left15: {
    marginLeft: 15,
  },
  actionWrap: {
    marginRight: 15,
  },
  close: {
    color: '#f4333c',
    fontSize: 18,
    fontWeight: '200',
    textAlign: 'left',
  },
  link: {
    transform: [{rotate: '225deg'}],
    color: '#f4333c',
    fontSize: 10,
    fontWeight: '500',
    textAlign: 'left',
  },
});

